<template>
	<view class="container">
		<!-- 顶部大图区域：iciba 图片 + 课堂信息文字 -->
		<view class="header" v-if="dailyBg" :style="{ backgroundImage: 'url(' + dailyBg + ')' }">
			<!-- 半透明遮罩，让字更清晰 -->
			<view class="header-mask"></view>

			<!-- 文本区域：日期 / 老师 / 课程 -->
			<view class="header-text">

				<text class="header-line course-text">
					📖｜{{ selectedCourseName || '请选择课程' }}
				</text>
				<text class="header-line teacher-text">
					🧑｜‍{{ selectedTeacherName || '请选择教师' }}
				</text>
				<text class="header-line date-text">
					⏰｜{{ classTimeBegin || '开始日期' }}至{{ classTimeEnd || '结束日期' }}
				</text>

			</view>
		</view>

		<!-- 原来的表单部分 -->
		<view class="form-item">
			<text class="label">日期</text>
			<picker mode="date" :value="selectedDate" @change="onDateChange">
				<view class="picker">{{ selectedDate }}</view>
			</picker>
		</view>

		<view class="form-item">
			<text class="label">教师</text>
			<picker mode="selector" :range="teachers" range-key="nickName" @change="onTeacherChange">
				<view class="picker">
					{{ selectedTeacherName || '请选择教师' }}
				</view>
			</picker>
		</view>

		<view class="form-item">
			<text class="label">课程</text>
			<picker mode="selector" :range="courses" range-key="displayText" @change="onCourseChange">
				<view class="picker">
					{{ selectedCourseName || '请选择课程' }}
				</view>
			</picker>
		</view>

		<!-- 分享课堂按钮 -->
		<view class="btn-box">
			<button class="submit-btn" open-type="share" :data-class-id="selectedCourse" :disabled="!selectedCourse">
				{{ selectedCourse ? '分享本课堂给家长' : '请选择课程后再分享' }}
			</button>
		</view>

		<view class="tip-text">
			请选择日期、教师和课程后，点击“分享本课堂给家长”，<br />
			家长在分享页完成课堂绑定。
		</view>
	</view>
</template>

<script>
	import api from '@/api/api.js';

	export default {
		data() {
			return {
				name: "Attendance Form",
				selectedDate: "",

				teachers: [],
				selectedTeacherId: "",
				selectedTeacherName: "",

				courses: [],
				selectedCourse: "",
				selectedCourseName: "",

				// iciba 每日图片
				dailyBg: '',
				dailyQuote: '',
				classTimeEnd: '',
				classTimeBegin: '',
			};
		},

		mounted() {
			// 默认设为今天
			const today = new Date();
			const yyyy = today.getFullYear();
			const mm = String(today.getMonth() + 1).padStart(2, "0");
			const dd = String(today.getDate()).padStart(2, "0");
			this.selectedDate = `${yyyy}-${mm}-${dd}`;

			this.selectTeacherList();
			this.fetchDailyImage();
		},

		onShareAppMessage(res) {
			if (res.from === 'button') {
				const dataset = res.target?.dataset || {};
				const classId = dataset.classId;
				console.log('share dataset = ', dataset, 'classId = ', classId);
				// 分享标题只用 日期 + 老师 + 课程
				const title =
					`${this.selectedDate || ''} ${this.selectedTeacherName || ''}｜${this.selectedCourseName || ''}`;

				// ✅ 不设置 imageUrl，使用当前页面截图（包含顶部大图 + 文字）
				return {
					title,
					path: `/pages/attendanceForm/attendanceByUser?classId=${classId}`
				};
			}

			return {
				title: '课堂绑定',
				path: '/page/attendanceForm/attendanceByUser'
			};
		},

		methods: {
			// 拉每日图
			fetchDailyImage() {
				uni.request({
					url: 'https://open.iciba.com/dsapi/',
					method: 'GET',
					success: (res) => {
						if (res.statusCode === 200 && res.data) {
							// 一般字段是 picture3 / content
							this.dailyBg = res.data.picture2 || res.data.picture2 || '';
							this.dailyQuote = res.data.content || '';
						}
					},
					fail: () => {
						// 失败就用本地默认图（可选）
						// this.dailyBg = '/static/images/default-share-bg.png'
					}
				});
			},

			selectTeacherList() {
				api.selectTeacherList().then(
					res => {
						if (res.code == 200) {
							this.teachers = res.data;
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
						}
					}
				);
			},

			getClassByDateAndTeacher() {
				if (!this.selectedTeacherId) return;
				api.getClassByDateAndTeacher({
					startDate: this.selectedDate,
					teacherId: this.selectedTeacherId,
				}).then(res => {
					if (res.code == 200) {
						// 这里拼一个展示用的字段
						this.courses = res.data.map(c => ({
							...c,
							displayText: `${c.classTopic}（${c.classTimeBegin}）`
							// 如果你的时间字段叫 classStartTime，就改成 c.classStartTime
						}));
						this.selectedCourse = '';
						this.selectedCourseName = '';
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
			},

			onDateChange(e) {
				this.selectedDate = e.detail.value;
				this.getClassByDateAndTeacher();
			},

			onTeacherChange(e) {
				const index = e.detail.value;
				const teacher = this.teachers[index];
				this.selectedTeacherId = teacher.userId;
				this.selectedTeacherName = teacher.nickName;
				this.getClassByDateAndTeacher();
			},

			onCourseChange(e) {
				const index = e.detail.value;
				const course = this.courses[index];
				this.selectedCourse = course.id;
				this.selectedCourseName = course.classTopic;
				this.classTimeBegin = course.classTimeBegin;
				this.classTimeEnd = course.classTimeEnd;
			}
		}
	};
</script>

<style>
	.container {
		min-height: 100vh;
		padding: 30rpx;
		padding-top: 0;
		background: linear-gradient(to bottom, #e6f4ea 0%, #fdfaf4 100%);
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
	}

	/* 顶部大图区域 */
	.header {
		position: relative;
		width: 100%;
		height: 860rpx;
		background-size: cover;
		background-position: center;
		border-bottom-left-radius: 40rpx;
		border-bottom-right-radius: 40rpx;
		overflow: hidden;
	}

	/* 半透明遮罩 */
	.header-mask {
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.25);
	}

	/* 文本容器 */
	.header-text {
		position: absolute;
		left: 40rpx;
		top: 40rpx;
		right: 40rpx;
		display: flex;
		flex-direction: column;
	}

	/* 三行文字样式 */
	.header-line {
		color: #fff;
		text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.5);
	}

	.date-text {
		font-size: 28rpx;
		margin-bottom: 6rpx;
	}

	.teacher-text {
		font-size: 30rpx;
		margin-bottom: 6rpx;
		font-weight: 600;
	}

	.course-text {
		font-size: 42rpx;
		font-weight: 700;
	}

	/* 表单 */
	.form-item {
		display: flex;
		align-items: center;
		margin: 30rpx 0;
	}

	.label {
		width: 120rpx;
		font-size: 28rpx;
		color: #333;
	}

	picker {
		width: 85%;
	}

	.picker,
	.value {
		flex: 1;
		height: 72rpx;
		line-height: 72rpx;
		padding: 0 20rpx;
		background: #fff;
		border-radius: 12rpx;
		box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
		font-size: 28rpx;
	}

	.btn-box {
		margin-top: 40rpx;
		display: flex;
		justify-content: center;
	}

	.submit-btn {
		width: 400rpx;
		background-color: #4caf50;
		color: #fff;
		border-radius: 30rpx;
		font-size: 30rpx;
	}

	.submit-btn[disabled] {
		opacity: 0.5;
	}

	.tip-text {
		margin-top: 30rpx;
		text-align: center;
		font-size: 24rpx;
		color: #666;
		line-height: 1.6;
	}
</style>